<template>
  <div class="templateMessage">
    <div class="item-title">公众号模板消息</div>
    <div class="content">
      <span>
        1.根据《服务号 小程序模板消息配置》文档介绍，在服务号/小程序后台添加相应的模板消息
        <a href="http://file.open.banchengyun.com/video/%E6%9C%8D%E5%8A%A1%E5%8F%B7%20%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%A8%A1%E6%9D%BF%E6%B6%88%E6%81%AF%E9%85%8D%E7%BD%AE.doc">《服务号 小程序模板消息配置》</a>
      </span>
      <br>
      <span>2.点击“更新”自动配置【公众号模板消息】</span>
    </div>
    <Table border :columns="columns" :data="OaList" width="900"></Table>
    <Button type="primary" class="serviceConfirm" @click="update('OA')">更新</Button>
    <div class="item-title">小程序模板消息</div>
    <div class="content">
      <span>1.点击“更新”自动配置【小程序模板消息】</span>
    </div>
    <Table border :columns="columns" :data="MpList" width="900"></Table>
    <Button type="primary" class="serviceConfirm" @click="update('MP')">更新</Button>
  </div>
</template>

<script>
import { List, Mp, Oa } from "api/recuit/templateMessage";

export default {
  name: "templateMessage",
  data() {
    return {
      columns: [
        {
          title: "标题",
          key: "title"
        },
        {
          title: "模板ID",
          key: "template_id"
        }
      ],
      MpList: [
        {
          title: "",
          template_id: "",
          cellClassName: {
            template_id: "demo-table-info-cell-age"
          }
        }
      ],
      OaList: []
    };
  },
  components: {},
  mounted() {
    this.getList()
  },
  methods: {
    //获取模板数据
    getList() {
      List()
        .then(result => {
          this.MpList = result.MP;
          this.OaList = result.OA;
          //template_id 为null时进行样式变换
          for (let i in result) {
            for (let j = 0; j < result[i].length; j++) {
              if (result[i][j].template_id == null) {
                result[i][j].template_id = "未配置";
              }
            }
          }
          console.log("res", result);
        })
        .catch(err => {
          console.log(err);
        });
    },
    //更新数据
    update(type) {
      if (type == "MP") {
        Mp()
          .then(result => {
            this.$Message.success("更新成功");
            this.getList();
          })
          .catch(err => {
            this.$Message.error(err);
          });
      } else if (type == "OA") {
        Oa()
          .then(result => {
            this.$Message.success("更新成功");
            this.getList();
          })
          .catch(err => {
            this.$Message.error(err);
          });
      }
    }
  }
};
</script>

<style scoped lang="less">
.templateMessage {
  width: 100%;
  height: 100%;
  padding: 2%;
  background: white;
  .item-title {
    margin-bottom: 20px;
    padding: 8px 16px;
    font-weight: bolder;
    background-color: #f5f5f5;
    color: #333;
  }
  .content {
    font-size: 14px;
    padding: 0 1% 1% 1%;
    a {
      color: rgb(143, 169, 211);
    }
  }
  .serviceConfirm {
    margin: 30px 30px 40px 800px;
  }
}
</style>
